<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>中国近代史科普</title>
        <link rel="stylesheet" href="styles.css">
        <script>
            window.onload = function() {
            const navLinks = document.querySelectorAll('.top1 li a');
              // 为每个导航链接添加点击事件
              navLinks.forEach(link => {
                link.addEventListener('click', function() {
                  // 移除所有链接的高亮样式      
                  navLinks.forEach(link => {    
                    link.classList.remove('active');    
                  });   
                  // 给当前点击的链接添加高亮样式   
                  this.classList.add('active');  
                });  
              });
              navLinks[2].classList.add('active');
            }
        </script>
    </head>
    <body>
      <style>
        /*全部样式*/
        html, body {
    font-family: "microsoft yahei, arial, helvetica, sans-serif";
    font-size: 16px;
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: url('../images/10.jpg'); /* 设置背景图片 */
    background-size: cover; /* 覆盖整个页面 */
    background-position: center; /* 居中显示 */
    background-attachment: fixed; /* 固定背景，不随滚动条滚动 */
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
    color: #000;
}

.auto {
    margin: 0 auto;
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

/* 网页样式 */
.top1 {
    height: 60px;
    background-color: rgb(200, 16, 16);
}

.top1 li {
    width: 150px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    float: left;
}

.top1 li a {
    color: #fff;
    display: block;
}

.top1 li a:hover {
    color: gold;
    font-weight: 700;
}
.top1 li a.active {
          color: gold;
          font-size: 20px;
          background-color: #ff6c6c;
          font-weight: 700;
        }
        
    
        .footer {
    background-color: rgb(200, 16, 16);
    color: white;
    width: 100%;
    text-align: center;
    line-height: 60px;
    margin-top: auto; /* 将页脚推至底部 */
}
    .sidebar {
        z-index: 3;
        position: fixed;
        top: 0;
        left: 0;
        width: 70px; /* 初始宽度 */
        margin-top: 60px;
        background-color: rgba(225, 157, 157, 0.5);
        color: #fff;
        text-align: center;
        padding-top: 200px;
        cursor: pointer;
        height: 350px;
        transition: width 0.5s;
    }
    .chakan {
        color: #fff;
    }
    .chakan:hover {
        background-color: gold;
        color: #000;
        font-weight: 700;
    }
    .sidebar:hover {
    width: 150px; /* 悬浮时的宽度 */
    }
    
    .sidebar li a{
    display: block;
    margin-bottom: 10px;
    opacity: 0;
    color: #fff;
    transition: opacity 0.5s;
    }
    .sidebar:hover li a {
        opacity: 1; /* 悬浮在侧边栏时，内容出现 */
    }

    .sidebar li a:hover {
    opacity: 1;
    color: #000;
    font-weight: 700;
    background-color: gold;
    }
.interactive-section {
    margin-left: 160px;
    margin-top: 30px;
    width:600px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.2);
}

.interactive-section input, .interactive-section button {
    margin: 20px 0;
    background-color: rgba(255, 255, 255, 0.3); /* 半透明背景 */
    color: inherit; /* 文字颜色继承自父元素 */
    border-width: 1px; /* 边框宽度 */
    border-style: solid; /* 边框样式 */
    border-color: #c68d8d; /* 边框颜色 */
    border-radius: 4px; /* 边框圆角 */
    outline: none; /* 移除焦点时的轮廓线 */
    padding: 10px; /* 内边距 */
    box-sizing: border-box; /* 边框和内边距包含在宽度内 */
}
.interactive-container{
    margin-left: 420px;
    margin-top: 100px;
    flex-direction: column;
}
.top2-container{
margin-left: 200px;
margin-top: 20px;
width: 600px;
color: yellow;

background: rgba(255, 255, 255, 0.1);
}
.top3-container{
    margin-left: 400px;
    margin-top: 50px;
    width: 600px;
    color: yellow;
    background-color: rgba(255, 255, 255, 0.1);
}

.xinhai1 img {
  width: 500px; /* 图片宽度占满div的宽度 */
  margin-top: -1000px;
  margin-left: 800px;
  height: 770px; /* 图片高度自动调整以保持比例 */
  opacity: 0.8;
}

      </style>
     
     <ul class="top1 auto clearfix">
        <li><a href="../index.html" class="nav-link">首页</a></li>
        <li><a href="../part1/partone.html" class="nav-link">鸦片战争</a></li>
        <li><a href="parttwo.html" class="nav-link">辛亥革命</a></li>
        <li><a href="../part3/partthree.html" class="nav-link">五四运动</a></li>
        <li><a href="../part4/Anti-JapaneseWar.html" class="nav-link">抗日战争</a></li>
        <li><a href="../part5/partfive.html" class="nav-link">中华人民共和国成立</a></li>
        <li style="float: right;"><a href="../part0/message.html">留言</a></li>
    </ul>
        <div class="sidebar">
            <ul class="sidebar">
                <p class="chakan">查看更多</p>
                <li><a href="parttwo.html">首页</a></li>
                <li><a href="history.html">历史背景</a></li>
                <li><a href="events.html">重大事件</a></li>
                <li><a href="people.html">人物介绍</a></li>
                <li><a href="impact.html">影响与意义</a></li>
                <li><a href="references.html">参考资料</a></li>
            </ul>
        </div>
        <div class="top2-container">
            <h1>辛亥革命：开启中国近代史的新篇章</h1>
        </div>
        <div class="top3-container">
            <h2>------- 探索1911年的革命历程，了解它对中国的深远影响</h2>
        </div>
        <aside class="right-sidebar">
            <h2>把10月10日定为辛亥革命纪念日</h2>
            <ul>
                <li><a href="https://history.sohu.com/a/815124287_161835">辛亥革命纪念日,缅怀孙中山先生!</a></li>
                <li><a href="https://history.sohu.com/a/815342695_121106884">自贡方志 | 辛亥革命在自贡</a></li>
                <li><a href="https://www.thepaper.cn/newsDetail_forward_28983744">【辛亥革命纪念日】铭记峥嵘岁月</a></li>
                <li><a href="https://baijiahao.baidu.com/s?id=1812513221668166405&wfr=spider&for=pc">辛亥革命113周年|岁月峥嵘 向史而新</a></li>
            </ul>
        </aside>
    
    <!-- 图片轮播容器 -->
    <div class="slider">
        <div class="slides">
            <img src="../images/2001.jpg" alt="辛亥革命1">
            <img src="../images/2006.jpg" alt="辛亥革命2">
            <img src="../images/2007.jpg" alt="辛亥革命3">
            <img src="../images/2008.jpg" alt="辛亥革命4">
        </div>
        <div class="slide-text">
            <h2>辛亥革命</h2>
        </div>
    </div>
     <!-- 互动模块（Interactive Section） -->
     <div class="interactive-container">
        <h2>问答环节</h2>
    </div>
    
     <section class="interactive-section">
        <form id="quizForm">
            <div id="questions"></div>
            <button type="submit">提交答案</button>
            
            <p id="result"></p>
        </form>
    </section>
    <div class="xinhai1">
        <img src="/images/2013.jpg" alt="辛亥革命1">
    </div>


    <script src="script.js"></script>
        <div class="footer auto">
            东北林业大学 © 2024 中国近代史科普
        </div>
        
    </body>
</html>